<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Themes</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
    <nav>
        <div class="container">
            <ul class="clearfix">
                <li class="li_2"><a href="#">Themes</a></li>
                <li class="li_1"><a href="#">FQA</a></li>
                <li class="li_1"><a href="#">About</a></li>
                <li class="li_1"><a href="#">Themes</a></li>
            </ul>
        </div>
    </nav>
    <div class="banner">
        <a class="loge" href="#">B</a>
        <h1 class="mt-1">Themes</h1>
        <p class="mt-2">Customize and extend</p>
        <a href="#" class="a_1 mt-2">Explore</a>
    </div>
    <div class="container pt-5 mb-2 pb-5 mt-2 text-center">
        <div class="row">
            <div class="col-md-4">
                <img src="images/a_03.png" alt="">
                <h5 class="mt-3">Components and examples</h5>
                <p class="p_1">Each theme features new components</p>
            </div>
            <div class="col-md-4">
                <img src="images/a_05.png" alt="">
                <h5 class="mt-3">Tons of variables</h5>
                <p class="p_1">Theme components inherit much</p>
            </div>
            <div class="col-md-4">
                <img src="images/s_03.png" alt="">
                <h5 class="mt-3">Source files and tools</h5>
                <p class="p_1">Each theme includes components</p>
            </div>
        </div>

    </div>
    <div class="container pl-0 pr-0">
        <h5 class="h5_1 text-center m-0">Team</h5>
        <div class="row row_1">
            <div class="col-md-4 text-center">
                <div class="card position: relative">
                    <img src="images/insta-2.jpg" alt="" class="img_1">
                    <p class="pt-5 mb-2">Jacob Thornton</p>
                    <p>
                        Creator of Bootstrap,engineer at Twitter<br>
                        & Medium.Founder of Bumpers.
                    </p>
                    <a href="#" class="a_2 mb-4">View GitHub</a>
                    <img src="images/avatar-fat.jpg" alt="" class="img_2">
                </div>
            </div>
            <div class="col-md-4 text-center">
                <div class="card position: relative">
                    <img src="images/insta-1.jpg" alt="" class="img_1">
                    <p class="pt-5 mb-2">Mark Otto</p>
                    <p>
                        Design at GitHub.Creator of Bootstrap.<br>
                        Previously at Twitter.Huge nerd.
                    </p>
                    <a href="#" class="a_2 mb-4">View GitHub</a>
                    <img src="images/avatar-mdo.jpg" alt="" class="img_2">
                </div>
            </div>
            <div class="col-md-4 text-center">
                <div class="card position: relative">
                    <img src="images/insta-3.jpg" alt="" class="img_1">
                    <p class="pt-5 mb-2">Dava Gamache</p>
                    <p>
                        Design at Twitter & Medium.Starting<br>
                        something new soon;)
                    </p>
                    <a href="#" class="a_2 mb-4">View GitHub</a>
                    <img src="images/avatar-dhg.png" alt="" class="img_2">
                </div>
            </div>
        </div>
        <div class="become">
            <div class="row pl-5">
                <div class="col-md-10">
                    <h5 class="mt-4">C'mon,chenk out the themes!</h5>
                    <p>Now you know what we're about,so peep the goods!</p>
                </div>
                <div class="col-md-2">
                    <a href="#" class="a_3">Explore</a>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <ul class="clearfix">
            <li><a href="#">About</a></li>
            <li><a href="#">Terms</a></li>
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Licenses</a></li>
            <li><a href="#">FQA</a></li>
            <li><a href="#">Bootstrap</a></li>
        </ul>
    </footer>
</div>
</body>
</html>